/**
 * 网页视图
 * chentao 2017/12/12
 * @flow
 */

import React, { PureComponent } from 'react';
import { View, Text, StyleSheet, WebView, InteractionManager } from 'react-native';
import {Screen,StyleModule} from '../common';
import {NavigationItem} from '../widget';

class WebScene extends PureComponent {
    static navigationOptions = ({ navigation }) => ({
       // header:null,//需要标题就屏蔽此处
        headerStyle: { backgroundColor: '#2a265a' },
        headerLeft: (

                <NavigationItem
                    style={{width: 30}}
                    icon={icons.icon_navigation_back}
                    onPress={() => {
                        navigation.goBack(null);
                    }}
                />
        ),
        headerTitle: (
            <View style={StyleModule.navigatorTitView}>
                <Text style={[StyleModule.navigatorTitle,{fontSize:18}]}> {navigation.state.params.title} </Text>
            </View>
        ),
        headerRight:(
            <View />
        ),
    });

    state: {
        source: Object
    };

    constructor(props: Object) {
        super(props);
        this.state = {
            source: {}
        }
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.props.navigation.setParams({ title: '加载中...' });
            this.setState({ source: { uri: this.props.navigation.state.params.url } });
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <WebView
                    ref='webView'
                    automaticallyAdjustContentInsets={false}
                    style={styles.webView}
                    source={this.state.source}
                    onLoadEnd={(e) => this.onLoadEnd(e)}
                    scalesPageToFit={true}
                />
            </View>
        );
    }

    onLoadEnd(e: any) {
        if (e.nativeEvent.title.length > 0) {
            this.props.navigation.setParams({ title: e.nativeEvent.title })
        }
    }
}
const icons = {
    icon_navigation_back: require('../MyApp/img/u=1290837614,3805990154&fm=27&gp=0.jpg'),
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#2c3e50',
    },
    webView: {
        flex: 1,
        // width:Screen.width,
        // height:Screen.height,
        backgroundColor: 'white',
    }
});

export default WebScene;
